<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8"/>
  <script src="confirm/js/jquery-3.1.1.min.js"></script>
  <link rel="stylesheet" type="text/css" href="confirm/css/JD2.css"/>

  <title></title>
</head>

<body>
<!--顶部-->
<header>
  <div class="header">
    <ul class="header-left">
      <li>
        <img src="confirm/img/header_1.png"/>
        <a href="http://gulimall.com">首页</a>
      </li>
      <li class="header-l-2">
        <i class="fa fa-map-marker" style="color: #5C5452;"></i>
        <a href="">北京</a>
        <div class="header-l-d">

          <ul>
            <li><a href="" style="background: red; color: white;">北京</a></li>
            <li><a href="">山西</a></li>
            <li><a href="">内蒙古</a></li>
            <li><a href="">福建</a></li>
            <li><a href="">江西</a></li>
            <li><a href="">西藏</a></li>
            <li><a href="">新疆</a></li>
          </ul>
          <ul>
            <li><a href="">上海</a></li>
            <li><a href="">河南</a></li>
            <li><a href="">江苏</a></li>
            <li><a href="">湖北</a></li>
            <li><a href="">四川</a></li>
            <li><a href="">陕西</a></li>
            <li><a href="">港澳</a></li>
          </ul>
          <ul>
            <li><a href="">天津</a></li>
            <li><a href="">辽宁</a></li>
            <li><a href="">山东</a></li>
            <li><a href="">湖南</a></li>
            <li><a href="">海南</a></li>
            <li><a href="">甘肃</a></li>
            <li><a href="">台湾</a></li>
          </ul>
          <ul>
            <li><a href="">重庆</a></li>
            <li><a href="">吉林</a></li>
            <li><a href="">安徽</a></li>
            <li><a href="">广东</a></li>
            <li><a href="">贵州</a></li>
            <li><a href="">青岛</a></li>
            <li><a href="">钓鱼岛</a></li>
          </ul>
          <ul>
            <li><a href="">河北</a></li>
            <li><a href="">黑龙江</a></li>
            <li><a href="">浙江</a></li>
            <li><a href="">广西</a></li>
            <li><a href="">云南</a></li>
            <li><a href="">宁夏</a></li>
            <li><a href="">海外</a></li>
          </ul>


        </div>
      </li>

    </ul>
    <ul class="header-right">
      <li>[[${session.sessionUser.nickname}]]<img src="confirm/img/03.png"
                                                  style="margin-bottom: 0px;margin-left3: 3px;"/><img
              src="confirm/img/06.png"/></li>
      <li>|</li>
      <li class="spacer"></li>
      <li><a href="">我的订单</a></li>
      <li class="spacer"></li>
      <li>
        <a href="">我的谷粒学院</a>
        <i class="fa fa-angle-down"></i>
        <div class="header-r-1 aa header-r-11">
          <div>
            <ol>
              <dd><a href="">待处理订单</a></dd>
              <dd><a href="">返修退换货</a></dd>
              <dd><a href="">降价商品</a></dd>

            </ol>
            <ol>
              <dd><a href="">消息</a></dd>
              <dd><a href="">我的问答</a></dd>
              <dd><a href="">我的关注</a></dd>

            </ol>

          </div>
          <div>
            <ol>
              <dd><a href="">我的京豆</a></dd>
              <dd><a href="">我的白条</a></dd>
            </ol>
            <ol>
              <dd><a href="">我的优惠劵</a></dd>
              <dd><a href="">我的理财</a></dd>
            </ol>

          </div>
          <div>
            <h4><a href="">我的足迹</a><a href="">更多 ></a></h4>
            <a href=""><img src="confirm/img/59ae02fcN529cc4a1.jpg"/></a>
            <a href=""><img src="confirm/img/59ce706fN6f3f2a4a.jpg"/></a>
            <a href=""><img src="confirm/img/57b191f2N15993cbb.jpg"/></a>
            <a href=""><img src="confirm/img/58ff269fN7b7e087b.jpg"/></a>

          </div>
        </div>

      </li>
      <li class="spacer"></li>
      <li><a href="">谷粒学院会员</a></li>
      <li class="spacer"></li>
      <li><a href="">企业采购</a></li>
      <li class="spacer"></li>
      <li>
        <a href="">客户服务</a>
        <i class="fa fa-angle-down"></i>
        <div class="header-r-1 aa header-r-2">
          <div>
            <h4>客户</h4>
            <ol>

              <dd><a href="">帮助中心</a></dd>
              <dd><a href="">在线客服</a></dd>
              <dd><a href="">电话客服</a></dd>
              <dd><a href="">金融咨询</a></dd>
            </ol>
            <ol>

              <dd><a href="">售后服务</a></dd>
              <dd><a href="">意见建议</a></dd>
              <dd><a href="">客服邮箱</a></dd>
              <dd><a href="">售全球客服</a></dd>
            </ol>
          </div>
          <div>
            <h4>商户</h4>
            <ol>

              <dd><a href="">合作招商</a></dd>
              <dd><a href="">商家后台</a></dd>
              <dd><a href="">商家帮助</a></dd>
            </ol>
            <ol>

              <dd><a href="">学习中心</a></dd>
              <dd><a href="">京麦工作台</a></dd>
              <dd><a href="">规则平台</a></dd>
            </ol>
          </div>
        </div>

      </li>
      <li class="spacer"></li>
      <li>
        <a href="">网址导航</a>
        <i class="fa fa-angle-down"></i>
        <div class="header-r-1 aa header-r-3">
          <div>
            <h4>特色主题</h4>
            <ol>
              <dd><a href="">谷粒学院试用</a></dd>
              <dd><a href="">国际站</a></dd>
              <dd><a href="">买什么</a></dd>
              <dd><a href="">0元评测</a></dd>
              <dd><a href="">优惠劵</a></dd>
              <dd><a href="">印尼站</a></dd>
              <dd><a href="">陪伴计划</a></dd>
            </ol>
            <ol>
              <dd><a href="">谷粒学院金融</a></dd>
              <dd><a href="">谷粒学院会员</a></dd>
              <dd><a href="">俄语站</a></dd>
              <dd><a href="">定期送</a></dd>
              <dd><a href="">秒杀</a></dd>
              <dd><a href="">谷粒学院金融科技</a></dd>
              <dd><a href="">出海招商</a></dd>
            </ol>
            <ol>
              <dd><a href="">全球售</a></dd>
              <dd><a href="">谷粒学院预售</a></dd>
              <dd><a href="">装机大师</a></dd>
              <dd><a href="">港澳售</a></dd>
              <dd><a href="">闪购</a></dd>
              <dd><a href="">In货推荐</a></dd>
            </ol>

          </div>

          <div>
            <h4>行业推荐</h4>
            <ol>
              <dd><a href="">手机</a></dd>
              <dd><a href="">玩3C</a></dd>
              <dd><a href="">家用电器</a></dd>
              <dd><a href="">服装城</a></dd>
              <dd><a href="">家装城</a></dd>
              <dd><a href="">食品</a></dd>
              <dd><a href="">农资频道</a></dd>
              <dd><a href="">图书</a></dd>

            </ol>
            <ol>
              <dd><a href="">智能数码</a></dd>
              <dd><a href="">电脑办公</a></dd>
              <dd><a href="">谷粒学院智能</a></dd>
              <dd><a href="">美妆馆</a></dd>
              <dd><a href="">母婴</a></dd>
              <dd><a href="">运动户外</a></dd>
              <dd><a href="">整车</a></dd>
            </ol>
          </div>


          <div>
            <h4>生活服务</h4>
            <ol>
              <dd><a href="">谷粒学院众筹</a></dd>
              <dd><a href="">谷粒学院金融App</a></dd>
              <dd><a href="">理财</a></dd>
              <dd><a href="">话费</a></dd>
              <dd><a href="">彩票</a></dd>
              <dd><a href="">机票酒店</a></dd>
              <dd><a href="">酒店到家</a></dd>
              <dd><a href="">游戏</a></dd>

            </ol>
            <ol>
              <dd><a href="">白条</a></dd>
              <dd><a href="">谷粒学院小金库</a></dd>
              <dd><a href="">智能家电</a></dd>
              <dd><a href="">水电煤</a></dd>
              <dd><a href="">旅行</a></dd>
              <dd><a href="">电影票</a></dd>
              <dd><a href="">谷粒学院众测</a></dd>
            </ol>
          </div>


          <div>
            <h4>更多精选</h4>
            <ol>
              <dd><a href="">合作招商</a></dd>
              <dd><a href="">谷粒学院E卡</a></dd>
              <dd><a href="">服务市场</a></dd>
              <dd><a href="">乡村招募</a></dd>
              <dd><a href="">京友邦</a></dd>
              <dd><a href="">智能社区</a></dd>
              <dd><a href="">知识产权维权</a></dd>


            </ol>
            <ol>
              <dd><a href="">谷粒学院通信</a></dd>
              <dd><a href="">企业采购</a></dd>
              <dd><a href="">办公生活馆</a></dd>
              <dd><a href="">校园加盟</a></dd>
              <dd><a href="">谷粒学院社区</a></dd>
              <dd><a href="">游戏社区</a></dd>
            </ol>
          </div>
        </div>

      </li>
      <li class="spacer"></li>
      <li class="header-r-4"><a href="">手机谷粒学院</a>
        <div class="aa h-r-1">

          <div>
            <div class="h-r-1img">
              <img src="confirm/img/59a51bf6Nb8e478cc.png"/>
            </div>
            <h4><a href="">手机谷粒学院</a></h4>
            <p>新人专享大礼</p>
            <div class="h-r-1img2">
              <a href=""><img src="confirm/img/8104b36ae6b72043ae838599d36d007d.png" alt=""/></a>
              <a href=""><img src="confirm/img/c0935b2c6504a5419e6ee507a5381bbe.png"/></a>
              <a href=""><img src="confirm/img/a64b429ebf83d2459a0a73830f4ad4c4.png"/></a>
            </div>
          </div>
          <div>
            <div class="h-r-1img">
              <img src="confirm/img/5874a54dNcec29924.jpg"/>
            </div>
            <h4><a href="">关注谷粒学院微信</a></h4>
            <p>微信扫一扫关注新粉最高180元惊喜礼包</p>
            <!--<div class="h-r-1img2">
              <a href=""><img src="confirm/img/8104b36ae6b72043ae838599d36d007d.png" alt="" /></a>
              <a href=""><img src="confirm/img/c0935b2c6504a5419e6ee507a5381bbe.png"/></a>
              <a href=""><img src="confirm/img/a64b429ebf83d2459a0a73830f4ad4c4.png"/></a>
            </div>-->
          </div>
          <div>
            <div class="h-r-1img">
              <img src="confirm/img/5874a555Ne8192324.jpg"/>
            </div>
            <h4><a href="">谷粒学院金融客户端</a></h4>
            <p>新人专享大礼</p>
            <div class="h-r-1img2">
              <a href=""><img src="confirm/img/8104b36ae6b72043ae838599d36d007d.png" alt=""/></a>
              <a href=""><img src="confirm/img/c0935b2c6504a5419e6ee507a5381bbe.png"/></a>
              <a href=""><img src="confirm/img/a64b429ebf83d2459a0a73830f4ad4c4.png"/></a>
            </div>
          </div>

        </div>


      </li>


    </ul>
    <div style="clear: both;"></div>
  </div>


</header>

<!--logo图片-->
<div class="top-1">
  <img src="confirm/img/logo1.jpg" class="img1"/><span>结算页</span>
  <!--右侧绿色-->
  <img src="confirm/img/08.png" class="img2"/>
</div>

<!--主体部分-->
<p class="p1">填写并核对订单信息</p>
<div class="section">
  <!--收货人信息-->
  <div class="top-2">
    <span>收货人信息</span>
    <span>新增收货地址</span>
  </div>
  <!--地址-->
  <div th:attr="addrId=${address.id}" th:each="address:${orderConfirm.address}" class="top-3 address">
    <p th:text="${address.name}"></p><span>[[${address.name}]]  [[${address.province}]]  [[${address.city}]] [[${address.region}]] [[${address.detailAddress}]]  [[${address.phone}]]</span>
  </div>
  <p class="p2">更多地址︾</p>
  <div class="hh1"/>
</div>

<!--支付方式-->
<h4 class="h4">支付方式</h4>

<div class="top-6">
  <p>货到付款</p>
  <p><span>惠</span>在线支付</p>
</div>
<div class="hh1"></div>
<!--送货清单-->
<h4 class="h4" style="margin-top: 5px;">送货清单</h4>
<div class="top_1">
  <div class="to_left">
    <h5><span class="peisong">配送方式</span><span class="dui"><img src="confirm/img/i_03.png"/> 对应商品</span></h5>
    <div class="box">
      谷粒学院快递
    </div>
    <p class="biao">
      <span class="til">标 准 达 ：</span>
      <span class="con">预计 12月16日[今天] 15:00-19:00 送达</span>
      <a href="#">修改</a>
    </p>
    <div class="updata-1">
      <img src="confirm/img/im_06.png"/>
      <span>京准达 标准达</span>
      <span style="color: black;"> 配送服务全面升级</span>
    </div>
    <div class="hh1"></div>
    <p class="tui">
      <span class="til">退换无忧：</span>
      <span class="con">
							<input type="checkbox"/>
							自签收后7天内退货，15天内换<span style="font-size: 12px;margin-left: 5px"> ￥ 0.50</span><br/>
						<span class="nul">货，</span>可享1次上门取件服务 ﹀
						</span>

    <div class="updata-2">
      <img src="confirm/img/im_11.png"/>
      <span>京准达运费大促（限自营中小件）</span>
    </div>

    </p>
    <p class="kg" style="color:#666666;margin-top: 13px;font-size: 12px">总重量 :<span
            style="color:#999999;font-size: 12px">0.095kg</span></p>
  </div>
  <div class="to_right">
    <h5>商家：谷粒学院自营</h5>
    <div>
      <button>换购</button>
      <span>已购满20.00元，再加49.90元，可返回购物车领取赠品</span></div>
    <!--图片-->
    <div th:attr="skuId=${item.skuId}" th:each="item:${orderConfirm.items}" class="yun1" style="margin-top: 10px">
      <img th:src="${item.image}" class="yun"/>
      <div class="mi">
        <p>[[${item.title}]]<span style="color: red;"> ￥ [[${item.price}]]</span> <span
                class="count"> [[${item.count}]] </span> <span>有货</span></p>
        <p><span>0.095kg</span></p>
        <p class="tui-1"><img src="confirm/img/i_07.png"/>支持7天无理由退货</p>
      </div>
    </div>

    <div class="hh1"></div>
    <p>退换无忧 <span class="money">￥ 0.00</span></p>
  </div>
</div>
<div class="bto">
  <h4 class="clear">使用优惠/礼品卡/抵用 ^</h4>
  <ul>
    <li class="red">优惠卡</li>
    <li>礼品卡</li>
    <li>京豆</li>
    <li>余额</li>
    <li>领奖码</li>
  </ul>
  <div class="tuijian clear">
    <input type="checkbox"/>
    <span>优惠组合推荐</span>
  </div>
</div>
<div class="xia">
  <div class="qian">
    <p class="qian_y">
      <span>[[${orderConfirm.count}]]</span>
      <span>件商品，总商品金额：</span>
      <span class="rmb">￥[[${orderConfirm.total}]]</span>
    </p>
    <p class="qian_y">
      <span>返现：</span>
      <span class="rmb">  -￥0.00</span>
    </p>
    <p class="qian_y">
      <span>运费： </span>
      <span class="rmb"> &nbsp ￥0.00</span>
    </p>
    <p class="qian_y">
      <span>服务费： </span>
      <span class="rmb"> &nbsp ￥0.00</span>
    </p>
    <p class="qian_y">
      <span>退换无忧： </span>
      <span class="rmb"> &nbsp ￥0.00</span>
    </p>
  </div>

  <div class="yfze">
    <p class="yfze_a"><span class="z">应付总额：</span>￥<span class="hq">[[${orderConfirm.payPrice}]]</span></p>
  </div>
  <button class="tijiao" th:attr="token=${orderConfirm.orderToken}">提交订单</button>
  </form>
</div>
</div>

<div class="headera">
  <div class="guanyuwomen">
    <ul>
      <li>
        <a href="#">关于我们</a>
      </li>
      <li>|</li>
      <li>
        <a href="#">联系我们</a>
      </li>
      <li>|</li>
      <li>
        <a href="#">联系客服</a>
      </li>
      <li>|</li>
      <li>
        <a href="#">合作招商</a>
      </li>
      <li>|</li>
      <li>
        <a href="#">商家帮助</a>
      </li>
      <li>|</li>
      <li>
        <a href="#">营销中心</a>
      </li>
      <li>|</li>
      <li>
        <a href="#">手机谷粒学院</a>
      </li>
      <li>|</li>
      <li>
        <a href="#">友情链接</a>
      </li>
      <li>|</li>
      <li>
        <a href="#">销售联盟</a>
      </li>
      <li>|</li>
      <li>
        <a href="#">谷粒学院社区</a>
      </li>
      <li>|</li>
      <li>
        <a href="#">风险检测</a>
      </li>
      <li>|</li>
      <li>
        <a href="#">隐私政策</a>
      </li>
      <li>|</li>
      <li>
        <a href="#">谷粒学院公益</a>
      </li>
      <li>|</li>
      <li>
        <a href="#">English Site</a>
      </li>
      <li>|</li>
      <li>
        <a href="#">Mdeila $ IR</a>
      </li>
    </ul>
  </div>
  <p class="p1">
    <a href="#"> 京公网安备 11000002000088号</a>|
    <a href="#"> 京ICP证070359号</a>|
    <a href="#"> 互联网药品信息服务资格证编号(京)-经营性-2014-0008 </a>|
    <a href="#">新出发京零 字第大120007号</a>
  </p>
  <p class="p1">
    <a href="#"> 互联网出版许可证编号新出网证(京)字150号</a>|
    <a href="#"> 出版物经营许可证</a>|
    <a href="#"> 网络文化经营许可证京网文 </a>|
    <a href="#">[2014]2148-348号 </a>|
    <a href="#"> 违法和不良信息举报电话 </a>|
    <a href="#">：4006561155 </a>
  </p>
  <p class="p1">
    <a href="#"> Copyright © 2004-2017 谷粒学院gulimall.com 版权所有</a>|
    <a href="#"> 消费者维权热线：4006067733 经营证照</a>|
  </p>
  <p class="p1">
    <a href="#"> 谷粒学院旗下网站：谷粒学院支付</a>|
    <a href="#"> 谷粒学院云</a>
  </p>
  <p class="p3">
    <img src="confirm/img/54b8871eNa9a7067e.png"/>
    <img src="confirm/img/54b8872dNe37a9860.png"/>
    <img src="confirm/img/54b8875fNad1e0c4c.png"/>
    <img src="confirm/img/5698dc03N23f2e3b8.jpg"/>
    <img src="confirm/img/5698dc16Nb2ab99df.jpg"/>
    <img src="confirm/img/56a89b8fNfbaade9a.jpg"/>
  </p>
</div>
<script>
  $(document).ready(function () {
    $('.header-right li:nth-of-type(6)').hover(function () {
      $('.header-r-11').css('display', 'block')
    }, function () {
      $('.header-r-11').css('display', 'none')
    })
    $('.header-right li:nth-of-type(12)').hover(function () {
      $('.header-r-2').css('display', 'block')
    }, function () {
      $('.header-r-2').css('display', 'none')
    })
    $('.header-right li:nth-of-type(14)').hover(function () {
      $('.header-r-3').css('display', 'block')
    }, function () {
      $('.header-r-3').css('display', 'none')
    })
    $('.header-l-2').hover(function () {
      $('.header-l-d').css('display', 'block')
    }, function () {
      $('.header-l-d').css('display', 'none')
    })
    $('.header-r-4').hover(function () {
      $('.h-r-1').css('display', 'block')
    }, function () {
      $('.h-r-1').css('display', 'none')
    })
  })

  $('.tijiao').click(function () {
    let data = {}
    let addrs = $('.address')
    if (!addrs || addrs.length === 0) {
      alert('请添加收货地址')
      return
    }
    data.addrId = $(addrs[0]).attr('addrId')
    data.orderToken = $(this).attr('token')
    data.total = $('.hq').text()
    data.payType = 1
    data.skus = []
    $('.yun1').each(function () {
      let skuId = $(this).attr('skuId')
      let count = $(this).find('.count').text()
      data.skus.push({skuId, count})
    })

    $.ajax({
      url: "/submitOrder",
      type: "POST",
      data: JSON.stringify(data),
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function (response) {
        if (response.code === 200) {
          location.href = response.data
        } else {
          alert(response.msg)
        }
      },
      error: function (xhr, textStatus, errorThrown) {
        console.log("Error:", errorThrown);
      }
    });
  })
</script>
</body>

</html>
